<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>购物车</el-breadcrumb-item>
    </el-breadcrumb>
    <!--
      方法1: 使用 element-ui 表格组件提供的 @selection-change
      方法2: 自定义
    -->
    <el-table
      ref="cartTable"
      :data="cartProducts"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        width="55">
        <template v-slot:header>
          <el-checkbox size="mini" v-model="checkedAll">
          </el-checkbox>
        </template>
        <!--
          @change="updateProductChecked"  默认参数：更新后的值
          @change="updateProductChecked(productId, $event)"  123, 原来那个默认参数
            当你传递了自定义参数的时候，还想得到原来那个默认参数，就手动传递一个 $event
         -->
        <template v-slot="scope">
          <el-checkbox
            size="mini"
            :value="scope.row.isChecked"
            @change="updateProductChecked({ prodId: scope.row.id, checked: $event })"
          >
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价">
      </el-table-column>
      <el-table-column
        prop="count"
        label="数量">
        <template v-slot="scope">
          <el-input-number size="mini" v-model="scope.row.count" :min="0" @change="changeProductCount(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="totalPrice"
        label="小计">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot="scope">
          <el-button size="mini" @click="delProduct(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <p>element-已选 <span>{{ selectTotal }}</span> 件商品，总价：<span>{{ selectTotalPrice }}</span></p>
      <p>已选 <span>{{ checkedTotal }}</span> 件商品，总价：<span>{{ checkedTotalPrice }}</span></p>
      <el-button type="danger">结算</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Cart',
  data () {
    return {
      selectProducts: []
    }
  },
  computed: {
    ...mapState('cart', ['cartProducts']),
    ...mapGetters('cart', ['totalCount', 'totalPrice', 'checkedTotal', 'checkedTotalPrice']),
    checkedAll: {
      get () {
        return this.cartProducts.every(item => item.isChecked)
      },
      set (value) {
        this.updateAllProductChecked(value)
      }
    },
    selectTotal () {
      return this.selectProducts.reduce((sum, cur) => sum + cur.count, 0)
    },
    selectTotalPrice () {
      return this.selectProducts.reduce((sum, cur) => sum + cur.totalPrice, 0)
    }
  },
  created () {
    this.$nextTick(() => {
      this.cartProducts.map(item => {
        if (item.isChecked) {
          this.$refs.cartTable.toggleRowSelection(item)
        }
      })
    })
  },
  methods: {
    ...mapMutations('cart', ['changeProductCount', 'delProduct', 'updateAllProductChecked', 'updateProductChecked']),
    // element-ui 自带的全选方法
    handleSelectionChange (val) {
      this.selectProducts = val
    }
  }
}
</script>

<style></style>
